<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>签约认证</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../css/step.css" />

    <style>
        body {
            background: #fff
        }

        .step-img {
            height: 19.6rem;
            margin: .3rem .6rem;
            background: #F2F2F2;
            border-radius: .5rem
        }

        .btn {
            margin: 1.2rem .6rem .6rem .6rem;
            width: calc(100% - 1.2rem)
        }

        .content {
            text-align: center;
        }

        .certification {
            height: 26.45rem;
            flex-direction: column;
        }

        .certific-btn {
            height: 2rem;
            width: 5.4rem;
            text-align: center;
            line-height: 2rem;
            color: #E93324;
            font-size: .7rem;
            background: #f2f2f2;
            border-radius: 1rem;
            margin-top: 1rem;
            border: none
        }
    </style>
</head>

<body>

    <section>
        <div id="app" class="content">
            <div class="font-10 text-color-9 step">
                <div class='setps'>
                    <div class="line"></div>
                    <div class="step-z-index" style="width:100%">
                        <div class="step-item">
                            <div class="wancheng-img flex-center">
                                <img src="../../image/order/wancheng.png" alt="">
                            </div>

                            <div>
                                签约
                            </div>

                        </div>
                        <div class="step-item">
                            <!-- <div class="dian"></div> -->
                            <div class="wancheng-img flex-center">
                                <img src="../../image/order/wancheng.png" alt="">
                            </div>
                            <div>
                                核查
                            </div>

                        </div>
                        <div class="step-item">
                            <div class="dian"></div>
                            <div>
                                完成
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <!-- 签约验证 -->
            <!-- <div class="certification flex-center">
                <div class="">
                   <progress value="0" max="100">0%</progress>
                </div>
                <div class="font-14 text-color-3">正在验证签约状态</div>
              </div> -->
            <!-- 签约验证完成 -->
            <div class="certification flex-center">
                <div class="" id="progress">
                    <!-- <progress value="0" max="100">0%</progress> -->
                </div>
                <div class="font-14 text-color-3">签约完成</div>
                <button class='certific-btn' tapmode @click='toCertificationOk'>确定</button>
            </div>
            <!-- 签约验证失败 -->
            <!-- <div class="certification flex-center">
                <div class="">
                   <progress value="0" max="100">0%</progress>
                </div>
                <div class="font-14 text-color-3">审核不通过，请重新提交</div>
                <button class='certific-btn'>重新填写</button>
              </div> -->
            <!-- 签约验证-超时20秒无返回信息 -->
            <!-- <div>
                <div class="step-img">

                </div>
                <div class="font-12 text-color-9">
                    请按上图步骤完成签约
                </div>
                <button class='red-btn btn'>已完成上述操作</button>
                <div class="font-14 red-text" tapmode @click='toCertificationHelp'>
                    签约失败点这里
                </div>
            </div> -->
        </div>
    </section>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript " src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js "></script>
<script type="text/javascript">
    apiready = function() {
        api.parseTapmode();

        var vm = new Vue({
            el: '#app',
            data: {

            },
            mounted() {
                this.getProcess()
            },
            methods: {
                toCertificationOk: function() {
                    api.openWin({
                        name: 'certification-ok_win',
                        url: './certification-ok_win.html',
                        pageParam: {
                            name: 'test'
                        }
                    });

                },
                toCertificationHelp: function() {
                    api.openWin({
                        name: 'certification-help_win',
                        url: './certification-help_win.html',
                        pageParam: {
                            name: 'test'
                        }
                    });
                },
                getProcess: function() {
                    var progressCircle = new ProgressCircle({
                        el: '#progress', //进度条容器
                        percentage: 60, //百分百进度
                        width: 120, //宽度
                        strokeWidth: 8, //环形的宽度，当环形的宽度是width的一半时是扇形
                        color: '#E93324', //进度条的颜色
                        background: '#f2f2f2' //进度条的背景色
                    })
                },
            }
        });


    };
</script>

</html>
